<template>
  <div class="big-screen">
    <div class="head">
      <h1>
        <div class="silver-animate">初拾动态数据驾驶舱</div>
      </h1>
      <div class="left-header">
        <time-box />
      </div>
      <div class="right-header">
        <div class="screen-full">
          <svg-icon :icon-class="isCloseBoundary?'exit-fullscreen':'fullscreen'" @click="fullScreenJudgment" />
        </div>
      </div>
    </div>

    <div class="mainbox">
      <ul class="clearfix remove-padding">
        <li>
          <div class="boxall">
            <div class="alltitle">新增留证</div>
            <subject-echarts class="allnav" />
            <div class="boxfoot" />
          </div>
          <div class="boxall">
            <div class="alltitle">留证信息</div>
            <evidence-scroll />
            <div class="boxfoot" />
          </div>
          <div class="boxall">
            <div style="height:100%; width: 100%;">

              <three-echarts
                key="yearEcharts"
                current-id="yearEcharts"
                :option="yearEcharts"
                class="sy"
              />
              <three-echarts
                key="typeEcharts"
                current-id="typeEcharts"
                :option="typeEcharts"
                class="sy"
              />
              <three-echarts
                key="moneyEcharts"
                current-id="moneyEcharts"
                :option="moneyEcharts"
                class="sy"
              />

            </div>
            <div class="boxfoot" />
          </div>
        </li>
        <li>

          <div class="map">
            <baidu-map-gl
              :map-attrs="mapAttrs"
              @changeMapInfo="changeMapInfo"
            />
          </div>

          <div class="boxall">
            <div class="alltitle">数据监测</div>
            <data-monitor class="allnav" :option="dataMonitor" />
            <div class="boxfoot" />
          </div>

        </li>
        <li>
          <div class="boxall map-info-box">
            <div id="mapInfoTitle" class="alltitle">{{ mapAttrs.name }}信息</div>

            <map-info-scroll
              ref="mapInfoScrollEle"
              :map-attrs="mapAttrs"
            />

            <div class="boxfoot" />
          </div>
          <div class="boxall">
            <div id="mapTypeTitle" class="alltitle">{{ mapAttrs.name }}分类</div>
            <div id="areaClassify" class="allnav" />
            <map-area-classify
              ref="mapAreaClassifyEle"
              class="allnav"
              :map-attrs="mapAttrs"
            />
            <div class="boxfoot" />
          </div>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
// import BackgroundCanvas from 'components/BackgroundCanvas/index'
import TimeBox from './childComp/TimeBox'
import SubjectEcharts from './childComp/SubjectEcharts'
import EvidenceScroll from './childComp/EvidenceScroll'
import ThreeEcharts from './childComp/ThreeEcharts'
import DataMonitor from './childComp/DataMonitor'
import MapAreaClassify from './childComp/MapAreaClassify'
import MapInfoScroll from './childComp/MapInfoScroll'
import BaiduMapGl from './childComp/BaiduMapGl'

import { fullScreenMixin } from '@/utils/fullScreenMixin'

export default {
  name: 'BigScreen',
  components: {
    BaiduMapGl,
    MapInfoScroll,
    MapAreaClassify,
    DataMonitor,
    ThreeEcharts,
    TimeBox,
    SubjectEcharts,
    EvidenceScroll
  },
  mixins: [fullScreenMixin],
  data() {
    return {
      num: 1,
      yearEcharts: {
        title: '留证年限分布',
        legendData: ['1年以下', '1-9年', '10-29年', '30-39年', '40-49年', '50年以上'],
        seriesData: [
          { value: 10, name: '1年以下' },
          { value: 8, name: '1-9年' },
          { value: 4, name: '10-29年' },
          { value: 2, name: '30-39年' },
          { value: 2, name: '40-49年' },
          { value: 1, name: '50年以上' }
        ]
      },
      typeEcharts: {
        title: '留证类型分布',
        legendData: ['电子商务', '教育', 'IT/互联网', '金融', '学生', '其他'],
        seriesData: [
          { value: 5, name: '电子商务' },
          { value: 1, name: '教育' },
          { value: 6, name: 'IT/互联网' },
          { value: 2, name: '金融' },
          { value: 1, name: '学生' },
          { value: 1, name: '其他' }
        ]
      },
      moneyEcharts: {
        title: '留证资本分布',
        legendData: ['50W', '100W', '500W', '1000W', '2000W', '5000W'],
        seriesData: [{ value: 2, name: '50W' },
          { value: 3, name: '100W' },
          { value: 1, name: '500W' },
          { value: 4, name: '1000W' },
          { value: 8, name: '2000W' },
          { value: 1, name: '5000W' }
        ]
      },
      dataMonitor: {
        legendData: ['监测数据', '接入数据'],
        xAxisData: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28'],
        seriesData: [
          {
            name: '监测数据',
            data: [30, 45, 30, 40, 40, 40, 30, 60, 20, 40, 40, 40, 30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 20, 40, 50, 60, 80]
          },
          {
            name: '接入数据',
            data: [60, 100, 100, 120, 80, 100, 80, 100, 120, 100, 120, 100, 120, 80, 120, 120, 130, 100, 100, 140, 120, 120, 110, 130, 130, 140, 160]
          }
        ]
      },
      mapAttrs: {
        id: 1,
        name: '当前留证'
      }
    }
  },
  computed: {
    isCloseBoundary() {
      return this.$store.state.app.isCloseBoundary
    }
  },
  created() {

  },
  mounted() {
  },
  methods: {
    changeMapInfo(obj) {
      Object.assign(this.mapAttrs, obj)
      // 清空mapInfoScrollEle中的数组、重新调用请求网络
      let mapInfoScrollEle = this.$refs.mapInfoScrollEle
      let mapInfoOriginAttr = mapInfoScrollEle.$options.data().mapInfo
      mapInfoScrollEle.mapInfo = mapInfoOriginAttr
      mapInfoScrollEle._getMapInfoData(this.mapAttrs.id)
      mapInfoScrollEle.destroyTextScroll() // 此处销毁 textScroll组件或重置setInterval
      // 重新请求mapAreaClassifyEle中的数据
      let mapAreaClassifyEle = this.$refs.mapAreaClassifyEle
      mapAreaClassifyEle._getAreaClassifyData(this.mapAttrs.id)
      // console.log(this.$refs.mapAreaClassifyEle)
    },
    fullScreenJudgment() {
      // 调用mixins中的函数
      if (this.isCloseBoundary === false) {
        this.intoFullScreen()
      } else {
        this.leaveFullscreen()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~assets/css/index.css';
//@import '~assets/css/scrollText.css';

.screen-full {
  display: inline-block;
  padding: 0 8px;
  height: 100%;
  font-size: 20px;
  color: #b7bdc4;

  &:hover {
    cursor: pointer;
  }
}

</style>
